import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { SourceBasic } from "./source-basic"
import { SourceCustom } from "./source-custom"

export const metadata = generateMetadata(
  "Source",
  "Displays website sources used by AI-generated content, showing URL details, titles, and descriptions on hover."
)

# Source

Displays website sources used by AI-generated content, showing URL details, titles, and descriptions on hover.

## Examples

### Basic Source

<ComponentCodePreview
  component={<SourceBasic />}
  filePath="app/docs/source/source-basic.tsx"
  classNameComponentContainer="p-0"
/>

### Custom Source

<ComponentCodePreview
  component={<SourceCustom />}
  filePath="app/docs/source/source-custom.tsx"
  classNameComponentContainer="p-0"
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<CodeBlock
  code={`npx shadcn add "https://prompt-kit.com/c/source.json"`}
  language="bash"
/>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/source.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### Source

| Prop     | Type            | Default | Description            |
| :------- | :-------------- | :------ | :--------------------- |
| href     | string          |         | The URL of the source  |
| children | React.ReactNode |         | The content to display |

### SourceTrigger

| Prop        | Type    | Default | Description                 |
| :---------- | :------ | :------ | :-------------------------- |
| label       | string  |         | The label to display        |
| showFavicon | boolean | false   | Whether to show the favicon |
| className   | string  |         | Additional CSS classes      |

### SourceContent

| Prop        | Type   | Default | Description                |
| :---------- | :----- | :------ | :------------------------- |
| title       | string |         | The title to display       |
| description | string |         | The description to display |
| className   | string |         | Additional CSS classes     |
